<template>
	<view>
		<navbar title="个人设置" :back="true" color="#fff" leftIconColor="#fff"/>
		<!-- <view style="height:200rpx;" class="u-flex u-row-center"  >
			<view style="width: 150rpx;height: 150rpx;">
				<u-upload width="150rpx" :limitType="['png', 'jpg', 'jpeg']" @afterRead="afterRead" @delete="deletePic" name="1">
					<u-image width="150rpx" height="150rpx" :src="avatar" shape="circle" />
				</u-upload>				
			</view>
		</view>
		<view class="u-flex u-row-center">
			<view><u-input v-model="nickname"   border="bottom" style="width:300rpx;" maxlength="16"/></view>
		</view> -->
        <view style="text-align: center;margin-top: 90rpx;">
			<view style="width: 160rpx;height: 160rpx;display: inline-block;">
				<button open-type="chooseAvatar" width="160rpx" class="btn1" @chooseavatar="onChooseAvatar">
					<view style="width: 160rpx;height: 160rpx;">
						<u-image width="160rpx" height="160rpx" :src="avatar" shape="circle"
							style="border: 4.17rpx solid rgba(255, 255, 255, 1);">
							<view slot="error" style="font-size: 24rpx;">加载失败</view>
						</u-image>
					</view>
				</button>
			</view>
			<view style="color:#666;">点击修改头像</view>
		</view>
         <view style="padding: 60rpx;">
			 <view class="">
				 <view style="font-weight: 650;margin-bottom: 20rpx;margin-left: 20rpx;">账号ID</view>
				 <view style="padding: 20rpx;border: 2rpx solid #ECECEC;border-radius: 24rpx;">{{id}}</view>
			 </view>
			 <view style="margin-top: 40rpx;">
				 <view style="font-weight: 650;margin-bottom: 20rpx;margin-left: 20rpx;">账号昵称</view>
				 <view style="padding: 20rpx;border: 2rpx solid #ECECEC;border-radius: 24rpx;" @tap="setName()">{{nickname}}</view>
			 </view>
			 <view style="margin-top: 40rpx;">
				 <view style="font-weight: 650;margin-bottom: 20rpx;margin-left: 20rpx;">性别</view>
				 <view style="display: flex;justify-content: space-between;align-items: center;">
				 	<view v-for="(item,index) in columns" :key="index" :class="index==sex?'set':'get'" style="width: 30%;text-align: center;" @click='getId(index)'>
				 		 {{item}}
				 	</view>
				 </view>
			 </view>
		 </view>
		


		<view style="line-height: 94rpx;">
		<!-- 	<view class="u-flex u-row-between line">
				<view class="font-1">ID</view>
				<view style="padding-right: 32rpx;" class="font-2">
					{{uid}}
				</view>
			</view>
			<view class="u-flex u-row-between line" @tap="setName()">
				<view class="font-1">昵称</view>
				<view class="u-flex u-row-left">
					<view style="margin-right: 34rpx;" class="font-2">
						{{nickname}}
					</view>
					<view>
						<u-icon name="arrow-right" size="36rpx" color='#000'></u-icon>
					</view>
				</view>
			</view> -->
			<!-- <view class="u-flex u-row-between line" @tap="showSex=true">
				<view class="font-1">性别</view>
				<view class="u-flex u-row-left">
					<view style="margin-right: 34rpx;" class="font-2">
						{{sex==0?'保密':sex==1?'男':'女'}}
					</view>
					<view>
						<u-icon name="arrow-right" size="36rpx" color='#000'></u-icon>
					</view>
				</view>
			</view> -->
		<!-- 	<view class="u-flex u-row-between line" @tap="showDate=true">
				<view class="font-1">出生日期</view>
				<view class="u-flex u-row-left">
					<view style="margin-right: 34rpx;" class="font-2">
						{{birthday==null?'':birthday}}
					</view>
					<view>
						<u-icon name="arrow-right" size="36rpx" color='#fff'></u-icon>
					</view>
				</view>
			</view> -->
			<!-- <view class="u-flex u-row-between line" @tap="quan">
				<view class="font-1">添加更多用户信息，领取更多权益</view>
				<view class="u-flex u-row-left">
					<view>
						<u-icon :name="quanshow?'arrow-down':'arrow-right'" size="48rpx"></u-icon>
					</view>
				</view>
			</view> -->
			<view v-show='quanshow'>
				<view class=" u-row-between line">
					<view class="font-1">有无产品过敏</view>
					<view style="padding-left: 12rpx;" class="font-2">
						<u-radio-group v-model="isIrritability" placement="row">
							<u-radio :customStyle="{margin: '8px'}" v-for="(item, index) in radiolist1" :key="index"
								:label="item.name" :name="item.id" @change="radioChange">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="u-row-between line">
					<view class="font-1">肤色</view>
					<view style="padding-left: 12rpx;" class="font-2">
						<u-radio-group v-model="skinColour" placement="row">
							<u-radio :customStyle="{margin: '8px'}" v-for="(item, index) in checkboxList1" :key="index"
								:label="item.name" :name="item.id" @change="radioChange1">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="u-row-between line">
					<view class="font-1">肤质特性</view>
					<view style="padding-left: 12rpx;" class="font-2">
						<u-radio-group v-model="skinTexture" placement="row">
							<u-radio :customStyle="{margin: '8px'}" v-for="(item, index) in checkboxList2" :key="index"
								:label="item.name" :name="item.id" @change="radioChange2">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="u-row-between line">
					<view class="font-1">皮肤敏感度</view>
					<view style="padding-left: 12rpx;" class="font-2">
						<u-radio-group v-model="skinSensitive" placement="row">
							<u-radio :customStyle="{margin: '8px'}" v-for="(item, index) in checkboxList3" :key="index"
								:label="item.name" :name="item.id" @change="radioChange3">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="u-row-between line">
					<view class="font-1">现有皮肤问题</view>
					<view style="padding-left: 20rpx;" class="font-2">
						<u-radio-group v-model="skinQuestion" placement="row">
							<u-radio :customStyle="{margin: '8px'}" v-for="(item, index) in checkboxList4" :key="index"
								:label="item.name" :name="item.id" @change="radioChange4">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
			<view class="u-flex u-row-center">
				<view class="btn" @tap="save()">保存</view>
			</view>
		</view>
		<u-datetime-picker height="50%" :show="showDate" v-model="date" mode="date" :minDate="1900" :maxDate="maxDate" 
			@confirm="confirmDate" @cancel="showDate=false"></u-datetime-picker>
		<!-- <u-picker :show="showSex" :columns="columns" @cancel="showSex=false" @confirm="confirmSex">
		</u-picker> -->
		<u-modal :show="showModel" title="设置昵称" @confirm="confirmModel">
			<input v-model="name" type="nickname" @change="changeName" style="border: 2rpx solid #eee;color: #000;"/>
		</u-modal>
		<!-- <u-modal height="100%" :show="qishow" mode='center' round='20' @confirm='confirm'>
			<view style="width:600rpx;padding: 20rpx;">
				<image :show-menu-by-longpress="true" :src="qiimg" mode="widthFix" style="width: 100%;"
					@longtap="previewImage"></image>
				<view style="display: flex;align-items: center;margin-left: 40rpx;">
					<image src="../../../static/images/loops.png" mode="" style="width: 100rpx;height: 100rpx;">
					</image>
					<view style="margin-left: 60rpx;color: #c6c6c6;">
						<view class=""> 长按识别企业二维码</view>
						<view class="">关注获取更多优惠信息</view>
					</view>
				</view>
			</view>

		</u-modal> -->
	</view>
</template>

<script>
	import navbar from '@/components/baseNavbar.vue'
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js'
	import {
		getConfig,
		getGroupValue
	} from "@/api/public.js"
	import {
		saveUserInfo,
		upload
	} from '@/api/user.js'
	import {
		HTTP_REQUEST_URL,
		HEADER,
		STATIC_URL
	} from '@/config/app';

	export default {
		components: {
			navbar
		},
		data() {
			return {
				fileList: [],
				nickname: '',
				avatar: '',
				uid: '',
				sex: 0,
				birthday: '',
				quanshow: false,
				qishow: false,
				showDate: false,
				maxDate: Number(new Date()),
				date: Number(new Date()),
				showSex: false,
				isIrritability: '',
				columns:['保密', '男', '女'],
				showModel: false,
				name: '',
				radiolist1: [{
						name: '无',
						id: 2,
						disabled: false
					},
					{
						name: '有',
						id: 1,
						disabled: false
					}
				],
				checkboxValue1: [],
				checkboxValue2: [],
				checkboxValue3: [],
				checkboxValue4: [],
				// 基本案列数据
				checkboxList1: [{
						name: '红润',
						id: 1,
						disabled: false
					},
					{
						name: '苍白',
						id: 2,
						disabled: false
					},
					{
						name: '潮红',
						id: 3,
						disabled: false
					},
					{
						name: '偏黄',
						id: 4,
						disabled: false
					},
					{
						name: '晦暗',
						id: 5,
						disabled: false
					}
				],
				checkboxList2: [{
						name: '干性',
						id: 1,
						disabled: false
					},
					{
						name: '中性',
						id: 2,
						disabled: false
					},
					{
						name: '油性',
						id: 3,
						disabled: false
					},
					{
						name: '混合性',
						id: 4,
						disabled: false
					}
				],
				checkboxList3: [{
						name: '低',
						id: 1,
						disabled: false
					},
					{
						name: '中',
						id: 2,
						disabled: false
					},
					{
						name: '高',
						id: 3,
						disabled: false
					}
				],
				checkboxList4: [{
						name: '暗疮',
						id: 1,
						disabled: false
					},
					{
						name: '暗疮印',
						id: 2,
						disabled: false
					},
					{
						name: '色斑',
						id: 3,
						disabled: false
					},
					{
						name: '毛孔粗大',
						id: 4,
						disabled: false
					}
				],
				qiimg: '',
				skinColour: '',
				skinTexture: '',
				skinSensitive: '',
				skinQuestion: ''
			}
		},
		onLoad() {
			getConfig('qiye_qrcode').then(res => {
				this.qiimg = res.data.value
			})
		},
		onShow() {
			let that = this
			this.$store.dispatch("USERINFO", true).then((res) => {
				that.nickname = res.nickname
				that.avatar = res.avatar
				that.id = res.id
				that.sex = res.sex
				// that.birthday = res.birthday
				// that.isIrritability = res.isIrritability
				// that.skinColour = res.skinColour
				// that.skinTexture = res.skinTexture
				// that.skinSensitive = res.skinSensitive
				// that.skinQuestion = res.skinQuestion
			});
		},
		computed: {
			head() {
				let token = this.$store.state.app.token;
				let head = {};
				head["Authori-zation"] = token;
				//head["Content-Type"] = "multipart/form-data"
				return head;
			},
			action() {
				return HTTP_REQUEST_URL + "/upload/image"
			}
		},

		methods: {
			getId(index){
				this.sex = index
			},
			quan() {
				this.quanshow = !this.quanshow
			},
			confirm() {
				console.log(111);
				this.qishow = false
				
			},
			previewImage(e) {
				uni.previewImage({
					// 需要预览的图片链接列表
					urls: [],
					// 为当前显示图片的链接/索引值
					current: this.img,
					// 图片指示器样式	
					indicator: 'default',
					// 是否可循环预览
					loop: false,
					// 长按图片显示操作菜单，如不填默认为保存相册
					// longPressActions:{
					// 	itemList:[this.l('发送给朋友'),this.l]
					// },
					success: res => {
						console.log('res', res);
					},
					fail: err => {
						console.log('err', err);
					}
				});
			},
			radioChange(e) {
				console.log(e);
				this.isIrritability = e
			},
			radioChange1(n) {
				console.log('change1', n);
				this.skinColour = n
			},
			radioChange2(n) {
				console.log('change2', n);
				this.skinTexture = n
			},
			radioChange3(n) {
				console.log('change3', n);
				this.skinSensitive = n
			},
			radioChange4(n) {
				console.log('change4', n);
				this.skinQuestion = n
			},
			changeName(val) {
				console.log('e', val, val.detail.value)
				this.name = val.detail.value

			},
			onChooseAvatar(e) {
				this.avatar = e.detail.avatarUrl
				pathToBase64(this.avatar)
					.then(res => {
						this.avatar = res
						base64ToPath(this.avatar)
							.then(path => {
								this.avatar = path
								this.uploadFilePromise(this.avatar)
							})

					})

			},
			save() {
				console.log("avatar11111", this.avatar);
				// this.qishow = true
               saveUserInfo({
               	nickname: this.nickname,
               	sex: this.sex,
               	avatar: this.avatar,
               	// birthday: this.birthday,
               	// isIrritability: this.isIrritability,
               	// skinColour: this.skinColour,
               	// skinTexture: this.skinTexture,
               	// skinSensitive: this.skinSensitive,
               	// skinQuestion: this.skinQuestion
               }).then(res => {
               	uni.showToast({
               		title: "保存成功",
               		icon: 'none'
               	})
               	setTimeout(() => {
               		uni.navigateBack(1)
               	}, 1000)
               })
			},
			confirmModel() {
				console.log('>namem', this.name)
				this.nickname = this.name
				this.showModel = false
			},
			setName() {
				//this.name = this.nickname
				this.showModel = true
			},
			confirmSex(value) {
				console.log('111',value);
				this.sex = value.indexs[0]
				this.showSex = false
			},
			confirmDate(value) {
				this.birthday = uni.$u.timeFormat(value.value, 'yyyy-mm-dd')
				this.showDate = false
			},
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					let result = await this.uploadFilePromise(lists[i].thumb)
					result = JSON.parse(result)
					if (result.code == 200) {
						this.avatar = STATIC_URL + result.data.url

					} else {
						let item = this.fileList[fileListLen]
						this.fileList.splice(fileListLen, 1)
						uni.showToast({
							title: result.message,
							icon: 'none',
							duration: 3000
						})
					}

					fileListLen++
				}
			},
			uploadFilePromise(url) {
				let a = this.action
				let head = this.head
				console.log("上传》》》", url)
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: a, // 仅为示例，非真实的接口地址
						filePath: url,
						header: head,
						name: 'file',
						success: (res) => {
							let obj = JSON.parse(res.data)
							console.log("chengg>>>", obj)
							console.log("url", obj.data)
							this.avatar = STATIC_URL + obj.data.url
							      console.log(this.avatar);
							resolve(res.data)

						},
						fail: (err) => {
							console.log("失败》》", err)
						}
					});
				})
			},

		}
	}
</script>

<style lang="scss">
page {
		background-color:#fff;
		color: #000;
	}
</style>
<style scoped lang="scss">
	.get{
		padding: 20rpx 0;
		border-radius: 20rpx;
		border:2rpx solid #ececec;
	}
	.set{
		padding: 20rpx 0;
		border-radius: 20rpx;
		border:2rpx solid #007DF7;
	    background-color:rgba(0, 125, 247, 0.08);
	}
	.avatar {
		width: 117rpx;
		height: 117rpx;
		border: 4.17rpx solid #eee;
		border-radius: 50%;
	}

	.line {
		padding-left: 33rpx;
		border-bottom: 1rpx solid rgba(112, 112, 112,.1);
		padding-right: 28rpx;
	}

	.font-1 {
		color:#000;
		font-size: 29.17rpx;
	}

	.font-2 {
		color: #000;
		font-size: 25rpx;
	}

	.btn {
		color: rgba(255, 255, 255, 1);
		font-size: 29.17rpx;
		width: 615rpx;
		line-height: 92rpx;
		background: #FF3F3F;
		box-shadow: 0rpx 6.25rpx 12.5rpx #FF3F3F;
		border-radius: 45.83rpx;
		text-align: center;
		margin-top: 100rpx;
	}

	.btn1 {
		background-color:transparent;
		border-radius: 0;
		line-height: 60rpx;
		font-size: 26rpx;
		width: 100%;
		box-sizing: inherit;
		padding: 0rpx;
	}

	.btn1::after {
		border: none;
	}
</style>
